<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style type="text/css">
        .number{
        width: 100%;    
        }
        .changecolor{
            border:1px solid red;
            background-color: blueviolet;
        }
    </style>
    <script>        
            function tableinit(){
            document.getElementById("table1").addEventListener("dblclick",(event)=>{
            let currentNode=event.target;   //获取被双击格子
            let input=document.createElement("input");  //创建一个文本框
            input.type="text";
            input.value=currentNode.innerHTML;
            input.size=input.value.length;
            //设定文本框丢失焦点时消失，并同时将文本框中的数据添入td。
            input.addEventListener("blur",(event)=>{
                let pn=event.target.parentNode;
                pn.innerHTML=event.target.value;
            },false);
            currentNode.innerHTML="";
            currentNode.appendChild(input);     //将文本框作为currentNode元素的子元素追加 
            input.focus();      //解决没法获取焦点bug.
            },false);
        }
        function onclicked(){
            let csstext=document.querySelector("#search").value;
            let mainNode=document.getElementsByTagName("main")[0];//新增
            let nodes = mainNode.querySelectorAll(csstext); //最后是这个地方出毛病了
            // let nod=document.querySelectorAll("#search").values;
            // let nod=mainNode.querySelectorAll("#search").value;//错了，与是否加s无关,value是值，values是多个值的集合
            let deleteNodes=mainNode.querySelectorAll("[class~=changecolor]");
            //注释里的三句不能用尝试修改
            Array.from(deleteNodes).forEach((item)=>{
                item.classList.remove("changecolor");
            });
            Array.from(nodes).forEach((item)=>{
                item.classList.add("changecolor");
            });
        }
        function init() {
            document.getElementById("button1").addEventListener("click", onclicked, false);
            document.getElementById("search").addEventListener("keydown",(event)=>{
                if(event.keyCode==13){
                    onclicked();
                }
            },false);
        }
        c("load",init,false);
        window.addEventListener("load",tableinit,false);
    </script>
</head>

<body>

    输入查找内容<input type="search" id="search">
    <button type="button" id="button1">提交</button>
    <main>
    <ul>一个列表
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>    
    <table border="1" class="number" id="table1">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>密码</td>
        </tr>
        <tr>
            <td>no.1</td>
            <td>男</td>
            <td>19</td>
            <td>anisc</td>
        </tr>
        <tr>
            <td>no.2</td>
            <td>女</td>
            <td>22</td>
            <td>inqwfd</td>
        </tr>
        <tr>
            <td>no.3</td>
            <td>男</td>
            <td>16</td>
            <td>n2idas4</td>
        </tr>
        <tr>
            <td>no.4</td>
            <td>女</td>
            <td>11</td>
            <td>qodok43c</td>
        </tr>
        
    </table>
    
    <button type="submit" >提交</button>
    <button type="reset">重置</button>
</main>

</body>
</html>